<!--文本定位组件-->
<template>
  <div>
    <input type="text" v-model="searchText" placeholder="输入搜索内容" />
    <button @click="searchAndScroll">搜索</button>
    <el-card>
      <!--要在content这个div内显示滚动条,而不影响父组件,就必须设置height与overflow-y-->
      <div id="content" style="height: 500px;overflow-y: auto">
        <p v-for="(line,index) in contentLines" :key="index">{{ line }}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: 'lk',
      contentLines: [
        '这是第一行内容',
        '这是第二行内容',
        '包含搜索词的一行内容',
        '这是第四行内容',
        '这是第四行内容l',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容l',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容',
        '这是第四行内容lk',
      ]
    };
  },
  methods: {
    searchAndScroll() {
      const targetText = this.searchText;
      const contentDiv = document.getElementById('content');
      const lines = contentDiv.querySelectorAll('p');
      for (let i = 0; i < lines.length; i++) {
        if (lines[i].textContent.includes(targetText)) {
          lines[i].scrollIntoView({ behavior: 'smooth' });
          break;
        }
      }
    }
  }
};
</script>